/***
A collection of useful CSS3 `@mixins` like `@box-shadow`, `@linear-gradient` etc.

Check the SASS-file for all of them.
***/
// Box reflect
@mixin box-reflect ($where: below, $distance: 5px, $amount: 25%) {
	-webkit-box-reflect: $where $distance -webkit-linear-gradient(top, rgba(0, 0, 0, 0) (100% - $amount), #fff 100%);
	-moz-box-reflect: $where $distance -moz-linear-gradient(top, rgba(0, 0, 0, 0) (100% - $amount), #fff 100%);
	-o-box-reflect: $where $distance -o-linear-gradient(top, rgba(0, 0, 0, 0) (100% - $amount), #fff 100%);
	-ms-box-reflect: $where $distance -ms-linear-gradient(top, rgba(0, 0, 0, 0) (100% - $amount), #fff 100%);
	box-reflect: $where $distance linear-gradient(top, rgba(0, 0, 0, 0) (100% - $amount), #fff 100%);
}

// Box Shadow
@mixin box-shadow ($shadow: 1px 1px 2px rgba(0, 0, 0, .4)) {
	-mox-box-shadow: $shadow;
	-webkit-box-shadow: $shadow;
	-ms-box-shadow: $shadow;
	-o-box-shadow: $shadow;
	box-shadow: $shadow;
}

// Linear Gradient
@mixin linear-gradient ($from: #111111, $to: #333333, $what: background, $start: top) {
	@if $what == background {
		background-color: $from;

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}',GradientType=0 ); /* IE6-9 */
	}

	#{$what}-image: -moz-linear-gradient($start, $from, $to); // FF 3.6+
	#{$what}-image: -ms-linear-gradient($start, $from, $to); // IE10
	#{$what}-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $from), color-stop(100%, $to)); // Safari 4+, Chrome 2+
	#{$what}-image: -webkit-linear-gradient($start, $from, $to); // Safari 5.1+, Chrome 10+
	#{$what}-image: -o-linear-gradient($start, $from, $to); // Opera 11.10
	#{$what}-image: -ms-linear-gradient($start, $from, $to); // Opera 11.10
	#{$what}-image: linear-gradient($start, $from, $to); // the standard
}

@mixin border-gradient ($from: #111111, $to: #333333, $what: border) {
	@include linear-gradient($from, $to, -webkit-#{$what});
	@include linear-gradient($from, $to, $what);
}

// Border Radius - http://css3please.com/
@mixin border-radius ($radius: 5px) {
	-moz-border-radius: $radius; // FF1-3.6
	-webkit-border-radius: $radius; // Saf3-4, iOS 1-3.2, Android <1.6
	border-radius: $radius; // Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+

	// useful if you don't want a bg color from leaking outside the border:
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

@mixin border-top-left-radius ($radius: 5px) {
	-webkit-border-top-left-radius: $radius;
	-moz-border-radius-topleft: $radius;
	border-top-left-radius: $radius;
}

@mixin border-top-right-radius ($radius: 5px) {
	-webkit-border-top-right-radius: $radius;
	-moz-border-radius-topright: $radius;
	border-top-right-radius: $radius;
}

@mixin border-bottom-right-radius ($radius: 5px) {
	-webkit-border-bottom-right-radius: $radius;
	-moz-border-radius-bottomright: $radius;
	border-bottom-right-radius: $radius;
}

@mixin border-bottom-left-radius ($radius: 5px) {
	-webkit-border-bottom-left-radius: $radius;
	-moz-border-radius-bottomleft: $radius;
	border-bottom-left-radius: $radius;
}

// Transition
@mixin transition ($transition: all $transition-duration ease-in-out) {
	-webkit-transition: $transition;
	-moz-transition: $transition;
	-o-transition: $transition;
	-ms-transition: $transition;
	transition: $transition;
}

// Transform
@mixin transform ($transform) {
	-moz-transform: $transform;
	-webkit-transform: $transform;
	-o-transform: $transform;
	-ms-transform: $transform;
	transform: $transform;
}

// Transform-style
@mixin transform-style ($transform-style) {
	-moz-transform-style: $transform-style;
	-webkit-transform-style: $transform-style;
	-o-transform-style: $transform-style;
	-ms-transform-style: $transform-style;
	transform-style: $transform-style;
}

// Backface-visibility
@mixin backface-visibility ($backface-visibility) {
	-moz-backface-visibility: $backface-visibility;
	-webkit-backface-visibility: $backface-visibility;
	-o-backface-visibility: $backface-visibility;
	-ms-backface-visibility: $backface-visibility;
	backface-visibility: $backface-visibility;
}

// Perspective
@mixin perspective ($perspective) {
	-moz-perspective: $perspective;
	-webkit-perspective: $perspective;
	-o-perspective: $perspective;
	-ms-perspective: $perspective;
	perspective: $perspective;
}

// Perspective origin
@mixin perspective-origin ($perspective-origin) {
	-moz-perspective-origin: $perspective-origin;
	-webkit-perspective-origin: $perspective-origin;
	-o-perspective-origin: $perspective-origin;
	-ms-perspective-origin: $perspective-origin;
	perspective-origin: $perspective-origin;
}

// Mask
@mixin mask ($mask) {
	-webkit-mask: $mask;
	-moz-mask: $mask;
	-o-mask: $mask;
	-ms-mask: $mask;
	mask: $mask;
}

// Column count
@mixin column-count ($num) {
	-moz-column-count: $num;
	-webkit-column-count: $num;
	-o-column-count: $num;
	-ms-column-count: $num;
	column-count: $num;
}

// Column gap
@mixin column-gap ($gap) {
	-moz-column-gap: $gap;
	-webkit-column-gap: $gap;
	-o-column-gap: $gap;
	-ms-column-gap: $gap;
	column-gap: $gap;
}

// Box sizing
@mixin box-sizing ($sizing) {
	-moz-box-sizing: $sizing;
	-webkit-box-sizing: $sizing;
	-o-box-sizing: $sizing;
	-ms-box-sizing: $sizing;
	box-sizing: $sizing;
}
